<!DOCTYPE html>
<html>

<head>
	<title> </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<style>
		body {
			font-family: '宋体';
			font-size: 18px;
			color: black;
			margin: 0;
			padding: 0;

		}

		.div-card {
			margin: 0;
			padding: 0;
			text-align: center;
			position: relative;
			page-break-after: always;
			width: 210mm;
			padding-top: 5mm;
			padding-left: 5mm;
			height: 140mm;
		}

		table {
			border-collapse: collapse;
		}

		table tr td {
			height: 12mm;
		}

		@media print {
			body {
				-webkit-print-color-adjust: exact;
			}
		}
	</style>

	<style type="text/css" media="print">
		@page {
			margin: 0;
			size: A5 landscape;
		}
	</style>

</head>

<body>
	<div id="app">
		<div class="div-card">
			<table border="1">
				<tr>
					<td>客户名称</td>
					<td colspan="2">{{noPassByName(info.CustomerName)}}</td>

					<td>生产产品</td>
					<td colspan="2">{{info.ProductName}} </td>


				</tr>
				<tr>
					<td style="width: 60mm;">品名、规格、克重</td>
					<td style="width: 25mm;">颜色</td>
					<td style="width: 25mm;">条数</td>
					<td style="width: 25mm;">把数</td>
					<td style="width: 30mm;">重量/件</td>
					<td style="width: 30mm;">总重量</td>
				</tr>
				<tr>
					<td>{{info.Specs}}*{{info.GramWeight}}</td>
					<td>{{info.ProductColor}} </td>
					<td>{{info.ProductNum}} </td>
					<td>{{info.SubUnitNum}} </td>
					<td>{{info.UnitWeight}} </td>
					<td>{{info.Weight}} </td>
				</tr>
				<tr>
					<td colspan="2" rowspan="5">
						<pre style="word-wrap: break-word; table-layout: fixed; width: 100%">{{info.CustomAttr}}</pre>
					</td>
					<td> <span v-if="info.Carft1==0">*</span> </td>
					<td> 压花</td>
					<td><span v-if="info.Carft3==0">*</span> </td>
					<td>套卷子 </td>

				</tr>
				<tr>

					<td> <span v-if="info.Carft1==1">*</span></td>
					<td> 平面</td>
					<td><span v-if="info.Carft3==1">*</span> </td>
					<td>叠套子 </td>
				</tr>
				<tr>

					<td><span v-if="info.Carft2==1">*</span> </td>
					<td>短舌</td>
					<td> <span v-if="info.Carft3==2">*</span></td>
					<td>绳卷 </td>
				</tr>
				<tr>

					<td> <span v-if="info.Carft2==0">*</span></td>
					<td>长舌</td>
					<td><span v-if="info.Carft3==3">*</span> </td>
					<td>绳叠 </td>
				</tr>
				<tr>

					<td>{{info.IsZheBian}} </td>
					<td>折边</td>
					<td> <span v-if="info.IsJingZhuang==1">*</span></td>
					<td>精装 </td>
				</tr>
				
				<tr>
					<td>生产机号</td>
					<td colspan="2">{{info.MachineNo}} </td>
					<td colspan="3"> {{ dateformat(info.ProduceDate,'yyyy年MM月dd日')}}</td>
				</tr>
				<tr>
					<td>备注</td>
					<td colspan="5">{{info.Remark}} </td>

				</tr>
			</table>
		</div>

	</div>
	<script src="../../js/vue.min.js"></script>
	<script language="javascript" type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				info: {},

			},
			computed: {

			},
			methods: {
				noPassByName(str) {
					if (null != str && str != undefined) {
						if (str.length ==2) {
							return  str.substring(0,1)+"*";
						} else if (str.length ==3) {
							return  str.substring(0,1)+"*"+str.substr(2,1)
						}else   {
							return str.substring(0, 2)+"**";
						} 
					} else {
						return "";
					}
				},
				dateformat(dtStr, fmt) { //author: meizz 
					if (!dtStr) {
						return "";
					}
					if (dtStr.indexOf('年') > -1 && dtStr.indexOf('-') < 0) {
						return dtStr;
					}
					var dt = new Date(dtStr);
					var o = {
						"M+": dt.getMonth() + 1, //月份 
						"d+": dt.getDate(), //日 
						"h+": dt.getHours(), //小时 
						"m+": dt.getMinutes(), //分 
						"s+": dt.getSeconds(), //秒 
						"q+": Math.floor((dt.getMonth() + 3) / 3), //季度 
						"S": dt.getMilliseconds() //毫秒 
					};
					if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (dt.getFullYear() + "").substr(4 - RegExp.$1.length));
					for (var k in o)
						if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
							"00" + o[k])
							.substr(("" + o[k]).length)));
					return fmt;
				}
			}
		});
		function printData(info) {
			app.info = info;
			setTimeout(() => {
				window.print();

			}, 500)

		}
	</script>
</body>

</html>